<template>
  <div class="outerTemplate" ref="outerTemplate">
    <header style="position: absolute;top: 0;left: 0;width: 100%;z-index: 100">
      <top-header :title=' checkTitle(activityName)' :hasTitle="true" :hasBack="true" :hasCart="true"
                  textAlign="center">
      </top-header>
    </header>
    <article class="discount-body">

      <vertical-scroll ref="verticalScroll" v-if="regularInfo">
        <div class="aui-content aui-margin-b-15">
          <div class="box">
            <HomeCarousel
              :swipimgage="swipimgage"
              :swipimgagewidth="swipimgagewidth"
              :swipimgageheight="swipimgagewidth*0.36">
            </HomeCarousel>
          </div>

          <div
            style="padding:0.4rem 0.75rem ;background: white;height: 0.9rem;box-sizing: content-box; border-bottom: 1rem solid #f7f7f7;vertical-align: middle;line-height: 0.9rem;">

            <span style="float:left;font-size: 0.7rem" v-if="totalPrice">  原价 <del>￥{{totalPrice.toFixed(2) }}</del>
            </span>

            <span class="cjy-price-lable-box">
            <span class="cjy-price-lable" style=""></span>
              立省 {{(totalPrice - packagePrice).toFixed(2)}}
            </span>


            <span style="display:inline-block;float:right;color:#ea2f1c ">套餐价<span
              style="font-size: 0.6rem;font-weight: 600">￥</span><span
              style="font-size: 0.8rem;font-weight: 600">{{packagePrice.toFixed(2)}}</span>
              </span>

            <!--<p>{{packageInfo}}</p>-->
          </div>

          <List ref="list"
                :regularInfo='regularInfo.regularPackageGoodsList || regularInfo.fixedPackageGoodsList '
                @changeAdequateStock="changeAdequateStock"
                @refresh="refresh"
                @changeTotalPrice="changeTotalPrice">
          </List>

          <div>

          </div>

        </div>
      </vertical-scroll>

      <div v-else class="no_data" style="padding: 5rem 0;">
        <img src="static/image/no_data.png">
        <p>暂无相关数据</p>

      </div>

    </article>

    <div class="settle_accounts aui-btn aui-btn-danger aui-btn-block aui-btn-sm" style="background: white !important;position: absolute;bottom:0;z-index:10;border-top: none;height: 2.5rem;line-height: 2.5rem;border-radius: 0px;font-size: 0.8rem;padding: 0px;"
    >
      <div v-if="adequateStock" id="confirm"
           style="width: 100%;background:#EF5423;" @click="addToCart">
        加入购物车，立享 {{ (totalPrice - packagePrice).toFixed(2) }}元优惠
      </div>

      <div v-if="!adequateStock" id="confirm" class="aui-btn aui-btn-danger aui-btn-block aui-btn-sm"
           style="width: 100%;background:#D7D7D7!important;height: 2.5rem;line-height: 2.5rem;border-radius: 0px;font-size: 0.8rem; ">
        套餐商品售罄，正在努力补货
      </div>
    </div>
    <add-cart-animate></add-cart-animate>

  </div>
</template>
<script>
  import PageFoot from '@/real-components/PageFoot'
  import HomeCarousel from '@/real-components/HomeCarousel'
  import VerticalScroll from '@/real-components/VerticalScroll'
  import List from './RegularDetailList'
  import TopHeader from '@/real-containers/header'
  import CommodityPromotion from "@/real-components/CommodityPromotion"
  import {queryRegularDetail, queryFixedDetail} from '@/utils/ReturnAxios'
  import AddCartAnimate from '@/real-components/AddCartAnimate'
  export default {
    data () {
      return {
        swipimgagewidth: 0,
        swipimgage: [
          'static/image/demo1.png'
        ],
        regularInfo: null,
        regularId: '',
        regularPackageId: '',
        activityName: '定期套餐',
        activityStartTime: '',
        activityEndTime: '',
        packagePrice: '',
        fixedPackageId: '',
        packageInfo: '',
        totalPrice: 0,
        adequateStock: false,
      }

    },
    components: {
      TopHeader,
      List,
      VerticalScroll,
      CommodityPromotion,
      HomeCarousel,
      AddCartAnimate,
      PageFoot
    },
    created () {
      this.regularId = this.$route.query.regularId || ''
      this.regularPackageId = this.$route.query.regularPackageId || ''
      this.fixedPackageId = this.$route.query.fixedPackageId || ''

      if (this.regularId) {
        this.queryRegularDetail()
      } else if (this.fixedPackageId) {
        this.queryFixedDetail()
        this.activityName = '固定套餐'
      } else {

      }

    },
    methods: {
      _initSwipimgagewidth () {
        this.swipimgagewidth = this.$refs.outerTemplate.offsetWidth
      },
      checkTitle (title) {
        if (title.length > 6) {
          return title.substr(0, 6) + '...'
        }
        return title
      },
      async queryRegularDetail () {
        var res
        try {
          res = await queryRegularDetail('&regularId=' + this.regularId)
          res = res.data
        }
        catch (erro) {
        }

        if (res.returncode == 0) {
          Toast({
            message: res.msg,
            type: 'fail'
          })
        } else {
          var pageInfo = res.data[0]

          if (!pageInfo) {
            return
          }
          this.regularInfo = pageInfo.regularPackageList.find((item) => {
              return item.regularPackageId == this.regularPackageId
            }) || this.regularInfo
        }
        if (!this.regularInfo) {
          return
        }
        this.initPage()
      },
      async queryFixedDetail () {

        var res
        try {
          res = await  queryFixedDetail(this.fixedPackageId)
          res = res.data
        }
        catch (erro) {
        }

        if (res.returncode == 0) {
          Toast({
            message: res.msg,
            type: 'fail'
          })
        } else {
          this.regularInfo = res.data[0]
          if (!this.regularInfo) {
            return
          }
        }
        this.initPage()
      },
      initPage () {
        var data = this.regularInfo
        this.activityName = data.packageName || this.activityName //活动 名称
        this.packagePrice = data.packagePrice || ''
        var swipimgage = data.detaileImg ? JSON.parse(data.detaileImg) : []
        this.swipimgage = swipimgage.map((item) => {
          return {publicityPicture: item}
        })
//          [{publicityPicture: 'sdfsadfasf'}]
        this.packageInfo = data.packageInfo || ''
      },
      translateDate (data) {
        if (!data) {
          return '暂无'
        }
        return data.split(' ')[0]
      },
      refresh() {
        this.$refs.verticalScroll.refresh()
      },
      returnPos(){
        var isReturn = this.$store.state.cjy.isReturn
        if (isReturn) {
          var pos = this.$store.state.cjy.returnPos
          this.$nextTick(() => {
            this.$refs.verticalScroll.gotoPosition(pos)
          })
        }
      },
      changeTotalPrice (data) {
        this.totalPrice = data
      },
      addToCart () {
        var list = this.$refs.list
        if (list) {
          list.addToCart()
        }
      },
      changeAdequateStock (data){
        this.adequateStock = data
      }
    },
    watch: {
      regularInfo(data) {
        if (!data) {
          return
        }
        this.returnPos()
      }
    },
    mounted () {
      this.$nextTick(
        () => {
          this._initSwipimgagewidth()
        }
      )

    }
  }
</script>

<style scoped>
  .outerTemplate {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }

  .discount-body {
    width: 100%;
    height: 100%;
    background: white;
    padding: 3rem 0 3rem;
  }

  .cjy-classify_title {
    display: inline-block;
    position: relative;
    height: auto;
    width: auto;
    font-size: 0.76rem;
    font-weight: 600;
    color: #ea2f1c;
    vertical-align: middle
  }

  .cjy-classify_title::before, .cjy-classify_title::after {
    content: '';
    height: 1px;
    position: absolute;
    top: 50%;
    width: 1.8rem;
    background: #ea2f1c;
    display: inline-block;
  }

  .cjy-classify_title::before {
    left: -2.6rem;
  }

  .cjy-classify_title::after {
    right: -2.6rem;
  }

  .cjy-price-lable {
    display: inline-block;
    position: absolute;
    left: -0.8rem;
    width: 0;
    height: 0;
    box-sizing: content-box;
    background: transparent;
    border-left: 0.4rem solid transparent;
    border-top: 0.4rem solid transparent;
    border-bottom: 0.4rem solid transparent;
    border-right: 0.4rem solid #E56C31;
  }

  .cjy-price-lable-box {
    display: inline-block;
    background: #E56C31;
    color: white;
    vertical-align: middle;
    font-size: 0.5rem;
    position: relative;
    height: 0.8rem;
    padding: 0 0.3rem 0 0.1rem;
    margin-left: 1rem;
    float: left;
    font-weight: 200
  }
</style>
